<template>
  <div class="bg-white h-full">
    <div class="h-full">
      <main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-full flex flex-col">
        <div class="flex items-baseline justify-between border-b border-gray-200 pt-6 pb-6">
          <div class="flex items-end hover:cursor-pointer" @click="toHome">
            <h1 class="text-4xl font-bold tracking-tight text-gray-900">Vehicle</h1>
            <div class="ml-1">v3.0.0</div>
          </div>
          <div class="lg:col-span-3">
              <div class="flex items-center justify-end mb-2">
                <button type="button" class="-m-2 ml-5 p-2 text-gray-400 hover:text-gray-500 sm:ml-7">
                  <span class="sr-only">View grid</span>
                  <Squares2X2Icon :class="actionIconClass" aria-hidden="true" @click="onActionIconClick" />
                </button>
              </div>
            </div>
        </div>
        <div>
          <slot />
        </div>
      </main>
    </div>
  </div>
</template>
  
<script setup>
import { Squares2X2Icon } from "@heroicons/vue/20/solid";
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { routeMap } from "@/router/index.js";

const router = useRouter();

const toHome = () => {
  router.push({ path: "/" });
};

// 图标动画逻辑
function toPlayGround() {
  router.push({ path: routeMap.RequestPlayground });
}

const actionIconState = ref(false);
const onActionIconClick = () => {
  actionIconState.value = !actionIconState.value;
  actionIconState.value ? toHome() : toPlayGround();
  
};
const actionIconClass = computed(() => {
  return [
    "h-5 w-5 transition duration-400",
    {
      "rotate-90 text-blue-500": actionIconState.value,
    },
  ];
});
</script>